<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相册自动播放器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background-color: #fff;
            color: #333;
            transition: all 0.3s ease;
            height: 100vh;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            text-align: center;
        }
        
        .control-panel {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .file-selector {
            margin-bottom: 20px;
        }
        
        .settings {
            margin: 20px 0;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        
        button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        
        input[type="file"] {
            display: none;
        }
        
        .custom-file-upload {
            border: 2px dashed #3498db;
            display: inline-block;
            padding: 15px 30px;
            cursor: pointer;
            border-radius: 5px;
            color: #3498db;
            font-weight: bold;
            transition: all 0.3s;
            margin-bottom: 10px;
        }
        
        .custom-file-upload:hover {
            background-color: #eaf2f8;
        }
        
        .file-info {
            margin: 10px 0;
            font-style: italic;
            color: #7f8c8d;
        }
        
        input[type="number"] {
            width: 80px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
        }
        
        /* 全屏图片模式 */
        .fullscreen-mode {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .fullscreen-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
        }
        
        .fullscreen-image.active {
            opacity: 1;
        }
        
        .hidden {
            display: none;
        }
        
        /* 进度条 */
        .progress-container {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 600px;
            height: 5px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            z-index: 1001;
        }
        
        .progress-bar {
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 5px;
            width: 0%;
            transition: width linear;
        }
        
        /* 返回按钮 */
        .back-button {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1002;
            background-color: rgba(0, 0, 0, 0.5);
            border: 2px solid white;
            color: white;
            padding: 10px 15px;
            border-radius: 50%;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .back-button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }
        
        .fullscreen-mode:hover .back-button {
            opacity: 1;
        }
        
        /* 自定义模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .modal.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            max-width: 400px;
            width: 90%;
            transform: scale(0.8);
            transition: transform 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }
        
        .modal.active .modal-content {
            transform: scale(1);
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        
        .modal-message {
            margin-bottom: 20px;
            color: #666;
        }
        
        .modal-button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
            width: 100%;
        }
        
        .modal-button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container" id="main-container">
        <div class="control-panel">
             <div class="file-selector">
                <label for="file-input" class="custom-file-upload">
                    选择图片文件
                </label>
                <input type="file" id="file-input" accept="image/*" multiple />
                <p class="file-info" id="file-info">未选择图片</p>
            </div>
            
            <div class="settings">
                <h3>播放设置</h3>
                <label for="interval">播放间隔(毫秒): </label>
                <input type="number" id="interval" value="3000" min="500">
                <button id="apply-settings">应用设置</button>
            </div>
            
            <div class="controls">
                <button id="play-btn" disabled>开始播放</button>
                <button id="stop-btn" disabled>停止播放</button>
                <button id="prev-btn" disabled>上一张</button>
                <button id="next-btn" disabled>下一张</button>
            </div>
        </div>
    </div>
    
    <!-- 全屏播放模式 -->
    <div id="fullscreen-mode" class="fullscreen-mode hidden">
        <img id="fullscreen-image" class="fullscreen-image" src="" alt="全屏图片">
        <div class="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <button class="back-button" id="back-button">×</button>
    </div>
    
    <!-- 自定义模态框 -->
    <div id="custom-modal" class="modal">
        <div class="modal-content">
            <div class="modal-title" id="modal-title">提示</div>
            <div class="modal-message" id="modal-message"></div>
            <button id="modal-button" class="modal-button">确定</button>
        </div>
    </div>
    
    <script>
        // 全局变量
        let imageFiles = [];
        let currentIndex = 0;
        let slideshowInterval = null;
        let intervalTime = 3000; // 默认3秒
        let progressInterval = null;
        
       // DOM元素
        const fileInput = document.getElementById('file-input');
        const fileInfo = document.getElementById('file-info');
        const mainContainer = document.getElementById('main-container');
        const fullscreenMode = document.getElementById('fullscreen-mode');
        const fullscreenImage = document.getElementById('fullscreen-image');
        const progressBar = document.getElementById('progress-bar');
        const backButton = document.getElementById('back-button');
        
        const playBtn = document.getElementById('play-btn');
        const stopBtn = document.getElementById('stop-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const intervalInput = document.getElementById('interval');
        const applySettingsBtn = document.getElementById('apply-settings');
        
        // 模态框元素
        const customModal = document.getElementById('custom-modal');
        const modalTitle = document.getElementById('modal-title');
        const modalMessage = document.getElementById('modal-message');
        const modalButton = document.getElementById('modal-button');
        
        // 显示自定义模态框
        function showModal(title, message) {
            modalTitle.textContent = title;
            modalMessage.textContent = message;
            customModal.classList.add('active');
            
            // 添加键盘事件监听
            document.addEventListener('keydown', handleModalKeydown);
        }
        
        // 隐藏自定义模态框
        function hideModal() {
            customModal.classList.remove('active');
            
            // 移除键盘事件监听
            document.removeEventListener('keydown', handleModalKeydown);
        }
        
        // 处理模态框键盘事件
        function handleModalKeydown(e) {
            if (e.key === 'Escape' || e.key === 'Enter') {
                hideModal();
            }
        }
        
         // 文件夹选择事件修改为文件选择事件
        fileInput.addEventListener('change', (event) => {
            const files = event.target.files;
            imageFiles = Array.from(files).filter(file => 
                file.type.startsWith('image/')
            );
            
            if (imageFiles.length > 0) {
                fileInfo.textContent = `已选择 ${imageFiles.length} 张图片`;
                enableControls();
                showImage(0);
            } else {
                showModal("提示", "未找到图片文件");
                disableControls();
            }
        });
        
        // 显示图片
        function showImage(index) {
            if (imageFiles.length === 0) return;
            
            // 确保索引在有效范围内
            if (index < 0) {
                currentIndex = imageFiles.length - 1;
            } else if (index >= imageFiles.length) {
                currentIndex = 0;
            } else {
                currentIndex = index;
            }
            
            const file = imageFiles[currentIndex];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                // 淡出当前图片
                fullscreenImage.classList.remove('active');
                
                // 设置新图片源后淡入
                setTimeout(() => {
                    fullscreenImage.src = e.target.result;
                    fileInfo.textContent = `已加载: ${file.name} (${currentIndex + 1}/${imageFiles.length})`;
                    
                    // 淡入新图片
                    setTimeout(() => {
                        fullscreenImage.classList.add('active');
                    }, 50);
                }, 800); // 等待淡出动画完成
            };
            
            reader.readAsDataURL(file);
        }
        
        // 开始幻灯片播放
        function startSlideshow() {
            if (slideshowInterval) {
                clearInterval(slideshowInterval);
            }
            
            // 进入全屏模式
            mainContainer.classList.add('hidden');
            fullscreenMode.classList.remove('hidden');
            
            // 显示第一张图片
            showImage(currentIndex);
            
            // 开始自动播放
            slideshowInterval = setInterval(() => {
                showImage(currentIndex + 1);
            }, intervalTime);
            
            // 开始进度条动画
            startProgressBar();
            
            playBtn.disabled = true;
        }
        
        // 开始进度条动画
        function startProgressBar() {
            if (progressInterval) {
                clearInterval(progressInterval);
            }
            
            progressBar.style.width = '0%';
            progressBar.style.transitionDuration = intervalTime + 'ms';
            
            // 使用setTimeout而不是transitionend事件，因为后者在快速切换时不可靠
            progressInterval = setInterval(() => {
                progressBar.style.width = '100%';
                setTimeout(() => {
                    progressBar.style.width = '0%';
                }, 10);
            }, intervalTime);
        }
        
        // 停止幻灯片播放
        function stopSlideshow() {
            pauseSlideshow();
            currentIndex = 0;
            
            // 退出全屏模式
            mainContainer.classList.remove('hidden');
            fullscreenMode.classList.add('hidden');
            
            // 重置进度条
            if (progressInterval) {
                clearInterval(progressInterval);
                progressBar.style.width = '0%';
            }
        }
        
        // 暂停幻灯片播放
        function pauseSlideshow() {
            if (slideshowInterval) {
                clearInterval(slideshowInterval);
                slideshowInterval = null;
            }
            
            if (progressInterval) {
                clearInterval(progressInterval);
                progressInterval = null;
            }
            
            playBtn.disabled = false;
        }
        
        // 启用控制按钮
        function enableControls() {
            playBtn.disabled = false;
            stopBtn.disabled = false;
            prevBtn.disabled = false;
            nextBtn.disabled = false;
        }
        
        // 禁用控制按钮
        function disableControls() {
            playBtn.disabled = true;
            stopBtn.disabled = true;
            prevBtn.disabled = true;
            nextBtn.disabled = true;
        }
        
        // 按钮事件监听
        playBtn.addEventListener('click', startSlideshow);
        stopBtn.addEventListener('click', stopSlideshow);
        prevBtn.addEventListener('click', () => {
            pauseSlideshow();
            showImage(currentIndex - 1);
        });
        nextBtn.addEventListener('click', () => {
            pauseSlideshow();
            showImage(currentIndex + 1);
        });
        backButton.addEventListener('click', stopSlideshow);
        
        // 应用设置
        applySettingsBtn.addEventListener('click', () => {
            const newInterval = parseInt(intervalInput.value);
            if (newInterval >= 500) {
                intervalTime = newInterval;
                // 如果正在播放，则重新开始以应用新间隔
                if (slideshowInterval) {
                    startSlideshow();
                }
            } else {
                showModal("输入错误", "播放间隔必须至少为500毫秒");
            }
        });
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            // 如果模态框处于活动状态，不处理键盘事件
            if (customModal.classList.contains('active')) return;
            
            if (fullscreenMode.classList.contains('hidden')) return;
            
            switch(e.key) {
                case 'ArrowLeft':
                    pauseSlideshow();
                    showImage(currentIndex - 1);
                    break;
                case 'ArrowRight':
                    pauseSlideshow();
                    showImage(currentIndex + 1);
                    break;
                case ' ':
                    if (slideshowInterval) {
                        pauseSlideshow();
                    } else {
                        startSlideshow();
                    }
                    break;
                case 'Escape':
                    stopSlideshow();
                    break;
            }
        });
        
        // 模态框按钮事件
        modalButton.addEventListener('click', hideModal);
        
        // 点击模态框背景关闭
        customModal.addEventListener('click', (e) => {
            if (e.target === customModal) {
                hideModal();
            }
        });
    </script>
</body>
</html>